<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Canvas 绘制阴影</title>
	<style>
		body {
			background: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		canvas {
			background: #fff;
		}

		h1 {
			color: #fff;
			font-size: 24px;
		}
	</style>
</head>

<body>
	<h1>阴影</h1>
	<canvas width="500" height="500"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */ // 提示补全

		const canvas = document.querySelector('canvas');
		const ctx = canvas.getContext('2d');

		// 添加绘制阴影，此后绘制的都带阴影
		ctx.shadowColor = 'rgba(0,0,0,.5)';
		// 阴影偏移量
		ctx.shadowOffsetX = 50;
		ctx.shadowOffsetY = 50;
		// 阴影的模糊像素
		ctx.shadowBlur = 3;

		ctx.fillRect(50, 50, 150, 150);
		ctx.strokeRect(50, 300, 150, 150);
	</script>
</body>

</html>